<%@ page contentType="text/html;charset=UTF-8" language="java"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	String websocketPath = "ws://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%> 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath }"></c:set>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">


<title>FastPay在线支付</title>
<link rel="stylesheet" href="${ctx}/css/buttons.css">
<link rel="stylesheet" type="text/css" href="${ctx}/css/pay.css">
<script src="${ctx}/js/jquery.min.js"></script>
<script type="text/javascript">
	function to_change() {
		var obj = document.getElementsByName('pay');
		for (var i = 0; i < obj.length; i++) {
			if (obj[i].checked == true) {
				if (obj[i].value == '1') {
					document.getElementById('type').value = 'alipay';
					document.getElementById('Submit').value = '支付宝支付';
				} else if (obj[i].value == '2') {
					document.getElementById('type').value = 'qq';
					document.getElementById('Submit').value = 'QQ钱包支付';
				} else if (obj[i].value == '3') {
					document.getElementById('type').value = 'wechat';
					document.getElementById('Submit').value = '微信支付';
				}
			}
		}
	};
</script>
	
</head>

<body>

	<form name="form1" id="form1" method="post" action="${ctx}/getPayInfo">
		<table width="550" border="0" align="center" cellpadding="8"
			cellspacing="1" bgcolor="#ffffff">
			<tbody>
				<tr>
					<td colspan="2"><div align="center">
							<strong>请输入支付金额</strong>
						</div></td>
				</tr>
				<tr>
					<td>
						<div align="right" style="width: 80px">充值金额：</div>
					</td>
					<td><label>
							<div style="width: 80px">
								<input type="text" id="money" name="money" value="" />
							</div>
					</label></td>
				</tr>
				
				<tr>
					<td>
						<div align="right" style="width: 80px">备注信息：</div>
					</td>
					<td><label>
							<div style="width: 80px">
								<input type="text" id="remark" name="remark" value="" />
							</div>
					</label></td>
				</tr>

				<tr>
					<td><div align="right">支付方式：</div></td>
					<td><label onclick="to_change()">
							<div class="fenlei">
								<input name="pay" type="radio" value="1" checked="checked">支付宝支付
							</div>
					</label> <label onclick="to_change()">
							<div class="fenleiwx">
								<input type="radio" name="pay" value="3">微信支付
							</div>
					</label> <label onclick="to_change()" style="display:none;">
							<div class="fenleicf">
								<input type="radio" name="pay" value="2">QQ钱包支付
							</div>
					</label></td>
				</tr>
				<tr>
					<td>
						<div align="right"></div>
					</td>
					<td>
						<label> 
							<input type="hidden" name="type" id="type" value="alipay"> 
							<input type="button" name="Submit"
								id="Submit" class="button button-pill button-primary"
								value="支付宝支付">
							<span id="errorDesc" style="color:red;"></span>
						</label>
					</td>
				</tr>
				<tr>
					<td>
						<div align="right"></div>
					</td>
					<td>购买本程序请联系作者QQ:157934991,其他人均为盗版<br> <br> <a
						target="_blank"
						href="http://wpa.qq.com/msgrd?v=3&uin=157934991&site=qq&menu=yes"><img
							border="0" src="http://wpa.qq.com/pa?p=2:157934991:51"
							alt="购买本程序请联系作者QQ:157934991" title="购买本程序请联系作者QQ:157934991" /></a> <a
						target="_blank"
						href="http://wpa.qq.com/msgrd?v=3&uin=157934991&site=qq&menu=yes"><img
							border="0" src="http://wpa.qq.com/pa?p=2:157934991:51"
							alt="购买本程序请联系作者QQ:157934991" title="购买本程序请联系作者QQ:157934991" /></a> <a
						target="_blank"
						href="http://wpa.qq.com/msgrd?v=3&uin=157934991&site=qq&menu=yes"><img
							border="0" src="http://wpa.qq.com/pa?p=2:157934991:51"
							alt="购买本程序请联系作者QQ:157934991" title="购买本程序请联系作者QQ:157934991" /></a>
					</td>
				</tr>

			</tbody>
		</table>

		</div>
	</form>
</body>

<!-- <img src="images/loding.gif"></img> -->
<script type="text/tpl" id="dialogTpl">
	<div class='loginCon'>
		<div class="dialogContent">
			<div id="imgbox">
				<img id="loding_img" src="${ctx}/images/loding.gif"></img>
				<img id="show_qrcode" style="display:none;"></img>
				<p id="pay_txt">正在请求支付</p>
			</div>
		</div>
		<div id='close'>点击关闭</div></div>
	</div>
</script>

<script type="text/javascript">
	$(function(){
		function showDialog(){
			//获取页面的高度和宽度
			var sWidth=document.body.scrollWidth;
			var sHeight=document.body.scrollHeight;
			
			//获取页面的可视区域高度和宽度
			var wHeight=document.documentElement.clientHeight;
			
			var oMask=document.createElement("div");
				oMask.id="mask";
				oMask.style.height=sHeight+"px";
				oMask.style.width=sWidth+"px";
				document.body.appendChild(oMask);
			var oLogin=document.createElement("div");
				oLogin.id="login";
				oLogin.innerHTML=document.getElementById("dialogTpl").innerHTML;
				document.body.appendChild(oLogin);
			
			//获取登陆框的宽和高
			var dHeight=oLogin.offsetHeight;
			var dWidth=oLogin.offsetWidth;
				//设置登陆框的left和top
				oLogin.style.left=sWidth/2-dWidth/2+"px";
				oLogin.style.top=wHeight/2-dHeight/2+"px";
			//点击关闭按钮
			var oClose=document.getElementById("close");
			//点击登陆框以外的区域也可以关闭登陆框
			oClose.onclick=function(){
				document.body.removeChild(oLogin);
				document.body.removeChild(oMask);
			};
		};
		
		var MSG_TYPE_REQUEST_PAY = 21;
		var MSG_TYPE_RESPONSE_PAY = 22;
		
		$("#Submit").click(function(){
			var data = {
				type:document.getElementById('type').value,
				money:$.trim($("#money").val()),
				remark:$.trim($("#remark").val())
			}
			if(data.money == ''){
				$("#errorDesc").text("请输入支付金额");
				return;
			}else{
				$("#errorDesc").text("");
			}
			
			$.post("${ctx}/userPay",data,function(received_msg){
				if(received_msg.code == 1){
					if(undefined != received_msg.result.data
							&& null != received_msg.result.data){
						var responseData = received_msg.result;
						if(responseData.msgType == MSG_TYPE_REQUEST_PAY){
							showDialog();
							handlerRequestPay(responseData);
						}else if(responseData.msgType == MSG_TYPE_RESPONSE_PAY){
							handlerResponsePay(responseData);
						}
					}			
				}else{
					$("#errorDesc").text(received_msg.define);
				}
			});
			
			function handlerRequestPay(responseData){
				if(responseData.code == 1){
					document.getElementById('pay_txt').innerText="正在获取支付二维码";
					getResponsePay(responseData.data.time);
				}else{
					document.getElementById('pay_txt').innerText="支付失败";
				}
			};
			
			var responseTimeOut = null;
			function getResponsePay(startTime){
				responseTimeOut = setInterval(function(){
					if(new Date().getTime() - parseInt(startTime) > 1000 * 60 * 5){
						if(null != responseTimeOut){
							$("#pay_txt").text("获取支付二维码超时");
							clearTimeout(responseTimeOut);
						}
					}else{
						$.post("${ctx}/response",function(resp){
							if(resp.code == 1){
								handlerResponsePay(resp.result);
								clearInterval(responseTimeOut);
							}
						});
					}
				},1000);
			}
			
			var payNotifyTimeOut = null;
			function getNotifyResult(startTime){
				payNotifyTimeOut = setInterval(function(){
					if(new Date().getTime() - parseInt(startTime) > 1000 * 60 * 5){
						if(null != payNotifyTimeOut){
							$("#pay_txt").text("获取支付结果超时");
							clearTimeout(payNotifyTimeOut);
						}
					}else{
						$.post("${ctx}/notify/result",function(resp){
							if(resp.code == 1){
								if(resp.result.status == "3"){
									$("#pay_txt").text("支付成功");
								}else{
									$("#pay_txt").text("支付失败");
								}
								clearInterval(payNotifyTimeOut);
							}
						});
					}
				},1000);
			}
			
			function handlerResponsePay(responseData){
				if(responseData.code == 1){
					document.getElementById('pay_txt').innerText="请扫描上方二维码进行支付";
					document.getElementById('loding_img').style.display = "none";
					
					var showQrcode = document.getElementById('show_qrcode');
					showQrcode.src = "http://mobile.qq.com/qrcode?url=" + responseData.payUrl;
					showQrcode.style.display="block";
					
					getNotifyResult();
				}else{
					document.getElementById('pay_txt').innerText="支付失败";
				}
			};
		});
	});
</script>
</html>